<template>
    <div class="wh-100" style="background-color: white">
        <div style="height: 60px" class="d-flex-align-center bor-base-b pl-24 fw-6 fs-18">
            职位审核
        </div>
        <div class="h-80 bor-base-b">
            <div class="h-10 d-flex-align-center bor-base-b">
                <div class="w-15 py-12 pl-24 mr-auto ">
                    <!--          <el-checkbox v-model="allChecked" @change="isAllChecked"></el-checkbox>-->
                    <Button style="background-color: white" class="ml-20" @click="download">导出数据</Button>
                    <Button type="dashed" @click="changeTip">{{ openTip ? '关闭提示' : '开启提示' }}</Button>
                </div>
                <div class="w-75 pl-100  d-flex-align-center">
                        <Select class="w-10" v-model="pageParams.status" >
                            <Option value="全部" >全部状态</Option>
                            <Option value="待审核" >待审核</Option>
                            <Option value="已通过" >已通过</Option>
                            <Option value="已拒绝" >已拒绝</Option>
                        </Select>
                        <Select class="w-25 ml-8" v-model="pageParams.jobCategory">
                            <Option value="全部" >全部职位</Option>
                            <Option v-for="item in positionSelect" :key="item.value"  :value="item.title">{{item.title}}</Option>
                        </Select>
                        <Select class="w-15 ml-8" v-model="pageParams.nature" placeholder="请选择">
                            <Option value="全部" >全部工作性质</Option>
                            <Option value="全职" >全职</Option>
                            <Option value="实习" >实习</Option>
                            <Option value="兼职" >兼职</Option>
                        </Select>

                        <Select class="w-10 ml-8" v-model="pageParams.salaryRange" placeholder="薪资">
                            <Option value="全部" >全部薪资</Option>
                            <Option value="1k以下" >1k以下</Option>
                            <Option value="1k-2k" >1k-2k</Option>
                            <Option value="2k-4k" >2k-4k</Option>
                            <Option value="4k-6k" >4k-6k</Option>
                            <Option value="6k-8k" >6k-8k</Option>
                            <Option value="8k-10k" >8k-10k</Option>
                            <Option value="10k-15k" >10k-15k</Option>
                            <Option value="15k-25k" >15k-25k</Option>
                            <Option value="25k以上" >25k以上</Option>
                        </Select>
                        <Select class="w-10 ml-8" v-model="pageParams.eduRequire" placeholder="学历">
                            <Option value="全部" >全部学历</Option>
                            <Option value="专科及以上">专科及以上</Option>
                            <Option value="本科及以上" >本科及以上</Option>
                            <Option value="硕士及以上" >硕士及以上</Option>
                            <Option value="博士及以上" >博士及以上</Option>
                        </Select>
                    <div class="w-30 ml-8 d-flex">
                        <Input class="w-70"  @on-keyup="pageParams.enterpriseName=pageParams.enterpriseName.replace(/\s/g,'')" placeholder="按单位名称查找" v-model="pageParams.enterpriseName"></Input>
                        <Button style="background-color: #1890ff;color: white" @click="toSearch">搜索</Button>
                    </div>
                </div>
            </div>
            <div class="h-90  overflow-auto-hidden ">
                <Alert v-show="openTip" show-icon>
                    已选择
                    <span >{{ selectList.length }}</span>
                    项
                    <a @click="toggleSelection">清空</a>
                </Alert>
                <el-table
                    ref="multipleTable"
                    v-loading="loading"
                    empty-text="暂无数据"
                    :height="heightNmber"
                    width="100%"
                    :header-cell-style="{ background: $backColor,color: '#333333' }"
                    :data="tableData"
                    @selection-change="handleSlectionChange"
                    style="width: 100%"
                >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column v-for="column in tableColumns" :key="column.prop" max :prop="column.prop" :label="column.label" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="status" label="状态" fixed="right">
                        <template #default="scope">
                            <el-link v-if="scope.row.status === '待审核'" type="primary" :underline="false">待审核</el-link>
                            <el-link v-if="scope.row.status === '未提交审核'" :underline="false">未提交审核</el-link>
                            <el-link v-if="scope.row.status === '审核通过'" type="success" :underline="false">已通过</el-link>
                            <el-link v-if="scope.row.status === '审核未通过'" type="danger" :underline="false">已拒绝</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="state" label="操作" fixed="right">
                        <template #default="scope">
                            <el-button type="text" size="small" @click="toAudit(scope.row.id)">
                                审核
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="h-10  fs-14 d-flex-center">
            <Page show-total :total="pageTotal" :current="pageParams.pageNumber" :page-size="pageParams.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" show-sizer show-elevator />
        </div>
    </div>
</template>
<script>
import { getnetPositionAPI, getPositionAPI, jobExportAPI } from '../../../api/bys/index';
import { positionExportAPI } from '@/api/Main/viewDetailsAboutADoubleMeetingApis';

export default {
    data() {
        return {
            positionSelect: [],
            loading: false,
            modelPosition: '',
            allChecked: false,
            tableData: [],
            tableColumns: [
                { prop: 'positionName', label: '职位名称' },
                { prop: 'jobCategory', label: '职位类别' },
                { prop: 'enterpriseName', label: '单位名称' },
                { prop: 'enterpriseType', label: '单位类别' },
                { prop: 'city', label: '工作城市' },

                { prop: 'number', label: '招聘人数' },
                { prop: 'endTime', label: '职位有效期' },
                { prop: 'createTime', label: '审核时间' }
                // {slot:"status",label:"状态"},
            ],
            pageTotal: 0,
            pageParams: {
                salaryRange: '全部', //薪资范围
                eduRequire: '全部', //学历
                enterpriseName: '', //企业名称
                jobCategory: '全部', //职位类别
                nature: '全部', //职位性质
                status: '全部', //审核状态
                pageSize: 10,
                pageNumber: 1,
            },
            heightNmber:'95%',
            openTip:true,
            selectList:[],
        };
    },
    mounted() {
        this.postData();
        this.getPosition();
    },
    methods: {
        changeTip(){
            this.openTip = !this.openTip
            if(this.openTip){
                this.heightNmber='95%'
            }else{
                this.heightNmber='100%'
            }
        },
        toggleSelection() {
            this.$refs.multipleTable.clearSelection();
        },
        download() {
            let ids = [];
            this.selectList.forEach(function(e) {
                ids.push(e.id)
            })
            positionExportAPI({ids: ids}).then(res => {
                this.importing1 = false;
                // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
                const blob = new Blob([res], { type: 'charset=utf-8' });
                let url = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', '审核职位信息表.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link); // 删除节点
                window.URL.revokeObjectURL(url); //释放该 url
            });
        },
        postData: function() {
            this.loading = true;
            console.log(this.pageParams);
            this.postRequest('/positionAudit/getByCondition', this.pageParams)
                .then(res => {
                    if (res.success) {
                        this.loading = false;
                        this.tableData = res?.result?.result || [];
                        this.pageTotal = res?.result?.total || 0;
                        console.log(this.tableData);
                    } else {
                        this.tableData = null;
                        this.loading = false;
                    }
                })
                .catch(err => {
                    this.loading = false;
                });
        },
        changePage: function(val) {
            this.pageParams.pageNumber = val;
            this.postData();
        },
        // region TODO 审核跳转
        toAudit(id) {
            console.log(id);
            this.$router.push({ name: 'PositionAudit', query: { id: id } });
        },
        // endregion
        // region TODO 搜索
        toSearch() {
            this.pageParams.pageNumber=1
            this.postData();
        },
        // endregion    // region TODO 职位类别
        getPosition() {
            getnetPositionAPI().then(res => {
                console.log(res, '职位类别');
                this.positionSelect = res.result;
            });
        },
        // endregion
        isAllChecked(e) {
            if (e) {
                this.$refs.multipleTable.toggleAllSelection();
            } else {
                this.$refs.multipleTable.clearSelection();
            }
            console.log(e, 'eeee');
        },
        handleSlectionChange(selection) {
            this.selectList=selection
            console.log(selection, '选中行的数据');
        },
        changePageSize: function(val) {
            this.pageParams.pageSize = val;
            this.postData();
        }
    }
};
</script>
<style scoped lang="less">
.el-table .cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
